<template>
  <sn-row-has-two-col
      class="choose-seat-info"
      :left="16" :right="8">
    <!-- 左侧座位信息-->
    <div slot="one-col">
      <!-- 座位和描述-->
      <seat-description/>
      <!-- 屏幕和选择-->
      <choose-seat-view ref="seat" @clickSeat="clickSeat"/>
    </div>
    <!-- 电影信息-->
    <right-movie-info
        @createOrder="toCreateOrder"
        ref="rightMovieInfo"
        slot="two-col"
        class="right-movie-info"/>
  </sn-row-has-two-col>
</template>

<script>
import SeatDescription from "@/views/order/choose_seat/seat_description/SeatDescription";
import ChooseSeatView from "@/views/order/choose_seat/choose_seat_view/ChooseSeatView";
import RightMovieInfo from "@/views/order/choose_seat/right_movie_info/RightMovieInfo";

export default {
  name: "ChooseSeat",
  data() {
    return {
      token: ''
    }
  },
  components: {
    SeatDescription,
    ChooseSeatView,
    RightMovieInfo
  },
  methods: {
    //点击座位信息
    clickSeat(seatInfo) {
      //1.电影信息子组件
      let rightMovieInfoComponent = this.$refs.rightMovieInfo
      //2.获取座位子组件
      let seatComponent = this.$refs.seat
      //3.判断当前座位状态
      let {x, y, status, id} = seatInfo
      //如果为0 说明未选中  就去选中 即添加
      if (status === 0) {
        //添加座位
        let seat = {
          id,
          des: x + '排' + y + '座'
        }
        let tickets = rightMovieInfoComponent.film.tickets
        if (tickets.length === 5) {
          this.myUtils.showMessage(this, '最多选择5个座位')
        } else {
          tickets.push(seat)
          seatComponent.chooseSeat(x, y, status)
        }
      } else {
        //删除座位
        let seat = x + '排' + y + '座'
        let tickets = rightMovieInfoComponent.film.tickets
        for (let i = 0; i < tickets.length; i++) {
          if (String(tickets[i].des) === String(seat)) {
            tickets.splice(i, 1)
            seatComponent.chooseSeat(x, y, status)
          }
        }
      }
    },
    //来到创建订单页面时 需要获取token来保证接口的幂等性
    getToken() {
      let userId = this.$store.getters.getUser.userId
      this.$http({
        url: `/web/order/getToken/${userId}`,
        method: 'get'
      }).then(({data}) => {
        this.token = data.data
      })
    },
    //创建订单
    toCreateOrder(orderInfo) {
      //1.获取当前订单的信息
      let {tickets, hall, coupon, totalPrice} = orderInfo
      //2.从vuex中获取当前要选择哪个电影的座
      let {movieInfo, cinemaInfo, fieldInfo} = this.$store.getters.getChooseSeatPageData
      //3.获取当前登录的用户
      let user = this.$store.getters.getUser
      //4.获取会员折扣
      let vipDiscount = user.discount
      //5.获取会员折扣金额
      let vipDiscountMoney = Number(totalPrice - totalPrice * vipDiscount / 10).toFixed(2)
      //6.获取实付金额
      let actualMoney = Number(totalPrice - vipDiscountMoney - coupon.amount).toFixed(2)
      //7.获取选中的座位
      let seats = []
      for (let i = 0; i < tickets.length; i++) {
        seats.push(tickets[i].id)
      }
      //8.构建订单
      let order = {
        //令牌
        token: this.token,
        //用户id
        userId: user.userId,
        //电影id
        movieId: movieInfo.movieId,
        //影厅id
        hallId: hall.id,
        //电影id
        cinemaId: cinemaInfo.cinemaId,
        //票价
        price: fieldInfo.price,
        //优惠金额
        couponMoney: coupon.amount,
        //会员折扣金额
        vipDiscountMoney: vipDiscountMoney,
        //实付金额
        actualMoney: actualMoney,
        //电影放映时间
        showTime: fieldInfo.showDate,
        //选择的座位
        seats: seats,
      }

      //9.向后端发送请求生成订单
      this.$http({
        url: '/web/order/create',
        method: 'post',
        data: this.$http.adornData(order)
      }).then(({data}) => {
        if (data.code === 0) {
          let orderNum = data.data
          //将后台传来的订单编号保存到vuex中
          this.$store.commit(this.mutationsTypes.EXCHANGE_ORDER_NUM, orderNum)
          this.$router.replace({
            name: 'orderPay'
          })
        } else {
          this.myUtils.showMessage(this, '点击过快，请稍后')
        }
      })
    }
  },
  created() {
    this.getToken()
  }
}
</script>

<style scoped>
.choose-seat-info {
  margin-top: 50px;
  border: solid 2px #E5E5E5;
  margin-bottom: 30px;
}

.right-movie-info {
  background-color: #F9F9F9;
}
</style>